<template>
    <wing-blank class="home-banners">
        <van-swipe :height="140">
            <van-swipe-item v-for="banner in banners" :key="banner.id" v-html="banner.content"></van-swipe-item>
        </van-swipe>
    </wing-blank>
</template>

<script>
  import { Image, Swipe, SwipeItem } from "vant"
  import { marketing } from "@mall/api-services"
  import WingBlank from "@/components/WingBlank"

  export default {
    name: "HomeBanners",
    components: {
      WingBlank,
      [Image.name]: Image,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
    },
    data() {
      return {
        banners: [],
      }
    },
    created() {
      this.refreshBanners()
    },
    methods: {
      refreshBanners() {
        marketing.BannerServiceV1.getBanners().list()
          .then(pagedBanners => this.banners = pagedBanners.elements)
      }
    },
  }
</script>

<style lang="scss" scoped>
    .home-banners {
        .van-swipe-item {
            ::v-deep img {
                width: 100%;
                height: 140px;
                vertical-align: top;
                border-radius: 10px;
            }
        }
    }
</style>
